<template>
	<view class="chart-cont">
		<l-echart class="chart" ref="chartRef" :customStyle="customStyle"></l-echart>
	</view>
</template>
<script setup lang="ts">
	import { ref, reactive, onMounted, watch } from 'vue';
	const echarts = require('../../../uni_modules/lime-echart/static/echarts.min');
	const props = defineProps({
		chartData: Array,
		settingData: Array,
		isSwitch: Boolean,
		chartTitle: String,
	});
	const chartRef = ref(null);
	const myChart = ref(null);
	const xData = ref([]);
	const yData = ref([]);
	const customStyle = ref({
		height: "200px"
	});
	const option = reactive({
		graphic: {
			type: 'text',
			left: 'center',
			top: 'middle',
			invisible: yData.value.length > 0, // 有数据时隐藏提示
			style: {
				text: '暂无相关数据',
				fontSize: 15,
				fill: '#999'
			}
		},
		legend: {
			show: false
		},
		tooltip: {
			trigger: 'axis',
			position: ["40%", "10%"]
		},
		grid: {
			top: 10,
			left: 20,
			right: 20,
			bottom: 20,
			containLabel: true,
		},
		xAxis: [
			{
				type: 'category',
				axisTick: {
					show: false,
				},
				axisLine: {
					lineStyle: {
						color: "#e1e1e1"
					}
				},
				axisLabel: {
					color: "#999"
				},
				splitLine: {
					lineStyle: {
						color: "#e1e1e1"
					}
				},
				data: xData.value,
			}
		],
		yAxis: [
			{
				type: 'value',
				splitNumber: props.isSwitch ? 1 : 5,
				axisLabel: {
					color: "#999",
					formatter: function (value, index, extra ?) {
						if (props.isSwitch) {
							return value == 1 ? '开' : '关';
						} else {
							return value;
						}
					}
				},
			}
		],
		series: [
			{
				name: '冷间温度',
				type: 'line',
				smooth: false,
				showSymbol: false,
				tooltip: {
					valueFormatter: function (value) {
						if (props.isSwitch) {
							return value == 1 ? '开' : '关';
						} else {
							return value + ' °C';
						};
					}
				},
				itemStyle: {
					color: "#1DE8E0"
				},
				lineStyle: {
					color: "#1DE8E0"
				},
				data: yData.value,
			},
		]
	});



	watch(() => props.chartData, () => {
		setTimeout(() => {
			initChart();
		}, 500)
	});

	watch(() => props.settingData, () => {
		setTimeout(() => {
			initChart();
		}, 500)
	});

	onMounted(() => {
		// 组件能被调用必须是组件的节点已经被渲染到页面上
		setTimeout(() => {
			// initChart();
		}, 1000)
	});

	async function initChart() {
		xData.value = [];
		yData.value = [];
		option.xAxis[0].data = [];
		option.series[0].data = [];
		if (props.chartData && props.chartData.length) {
			props.chartData.forEach(element => {
				xData.value.push(element["time"]);
				yData.value.push(element["num"]);
			});
			option.yAxis[0].splitNumber = props.isSwitch ? 1 : 5;
			option.xAxis[0].data = xData.value;
			option.series[0].data = yData.value;
			option.series[0].name = props.chartTitle || "温度";
		} 


		if (yData.value.length > 0) {
			option.graphic.invisible = true;
		} else {
			option.graphic.invisible = false;
		}
		if (!chartRef.value) return
		const chart = await chartRef.value.init(echarts)
		chart.setOption(option)
		myChart.value = chart;
	}
</script>
<style lang="scss" scoped>
	.chart-cont {
		position: relative;
		width: 100%;
		height: 100%;

		.chart {
			width: 100%;
			height: 100% !important;
		}
	}
</style>